<head>
    <script src="../build/index.js"></script>
</head>

<body>
    <canvas id="app" width="1200" height="2400"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'));
        $app.start();

        Easycanvas.ImgLoader('https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G30x30.png', function (img) {
            // create a Sprite
            window.Sprite1 = $app.add({
                name: 'Sprite1',
                content: {
                    // img: img,
                },
                style: {
                    width: 100,
                    left: 100, top: 100,
                    locate: 'lt',
                    opacity: 0.5,
                    rotate: 40,
                    // rx: 0, ry: 0,
                },
                events: {
                    click: function () {
                        console.log(3);
                    }
                },

                children: [
                    {
                        name: 'c1',
                        content: {
                            img: img,
                        },
                        style: {
                            left: 500, top: 0,
                            zIndex: 1,
                            opacity: 0.5,
                            locate: 'center',
                        },
                        events: {
                            eIndex: -3,
                            click: function () {
                                console.log(1);
                            }
                        }
                    },
                    {
                        name: 'c2',
                        content: {
                            img: img,
                        },
                        style: {
                            left: 0, top: 500,
                            opacity: 0.2,
                            zIndex: 2,
                            locate: 'lt',
                            // scale: 5
                        },
                        events: {
                            eIndex: -31,
                            click: function () {
                                console.log(2);
                            }
                        }
                    },
                    {
                        name: 'c3',
                        content: {
                            img: img,
                        },
                        style: {
                            left: 500, top: 500,
                            opacity: 0.7,
                            zIndex: 3,
                            locate: 'center',
                        },
                        events: {
                            eIndex: -31,
                            click: function () {
                                console.log(3);
                                this.style.opacity = 0;
                            }
                        }
                    },
                ],
            });
            // Sprite1.combineAsync();
            window.Sprite2 = $app.add({
                name: 'Sprite2',
            });
        });
    </script>
</body>

